<template>
  <div>
    <el-container>
      <!-- 功能分布框 -->
      <el-header style="padding: 0px">
        <el-row :gutter="20">
          <el-col :span="8">
            <div @click="clickButton('1')" :class="[clickClass == '1' ? 'clickClass' : '']" class="grid-content bg-purple">
              账号信息
            </div>
          </el-col>
          <el-col :span="8">
            <div @click="clickButton('2')" :class="[clickClass == '2' ? 'clickClass' : '']" class="grid-content bg-purple">
              企业信息
            </div>
          </el-col>
          <el-col :span="8">
            <div @click="clickButton('3')" :class="[clickClass == '3' ? 'clickClass' : '']" class="grid-content bg-purple">
              法人信息
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 切换的选项卡 -->
      <el-main class="Main">
        <!-- 账号信息 -->
        <div v-if="clickClass == 1">
          <div class="AccountTitle">账号信息</div>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 账号:
              {{ list.name || "暂无数据" }}</el-col>
            <el-col :span="12"><i class="el-icon-user-solid"></i> 邮箱:
              {{ list.email || "暂无数据" }}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 姓名:
              {{ list.realName || "暂无数据" }}</el-col>
            <el-col :span="12"><i class="el-icon-user-solid"></i> 手机号:
              {{ list.phone || "暂无数据" }}</el-col>
          </el-row>
        </div>
        <!-- 企业信息 -->
        <div v-if="clickClass == 2">
          <div class="AccountTitle">企业信息</div>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 企业全称:
              {{ list.companyName || "暂无数据" }}</el-col>
            <el-col :span="12"><i class="el-icon-user-solid"></i> 所属地区:
              {{ list.address || "暂无数据" }}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 所属公司:
              {{ list.company || "暂无数据" }}</el-col>
            <el-col :span="12" style="display: flex"><i class="el-icon-user-solid"></i><span>执照显示：</span>
              <div>
                <el-image style="width: 100px; height: 100px; margin-right: 10px;" :src="list.pictures.pictureUrlFront"
                  :preview-src-list="list.pictures.pictureUrlFrontArr">
                </el-image>
                <el-image style="width: 100px; 
                : 100px" :src="list.pictures.pictureUrlback" :preview-src-list="list.pictures.pictureUrlbackArr">
                </el-image>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 法人信息 -->
        <div v-if="clickClass == 3">
          <div class="AccountTitle">法人信息</div>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 法人姓名:
              {{ list.legalName || "暂无数据" }}</el-col>
            <el-col :span="12"><i class="el-icon-user-solid"></i> 法人身份证:
              {{ list.legalIdCode || "暂无数据" }}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 法人电话:
              {{ list.legalTel || "暂无数据" }}</el-col>
            <el-col :span="12"><i class="el-icon-user-solid"></i> 社会信用代码:
              {{ list.unifiedSocialCreditCode || "暂无数据" }}</el-col>
          </el-row>
        </div>
        <!-- 业务信息 -->
        <div v-if="clickClass == 4">
          <div class="AccountTitle">业务信息</div>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 关联角色: 123456</el-col>
            <el-col :span="12"><i class="el-icon-user-solid"></i> 拥有资源: 123456</el-col>
          </el-row>
          <el-row :gutter="20" style="margin: 20px">
            <el-col :span="12"><i class="el-icon-user-solid"></i> 拥有权限: 123456</el-col>
            <el-col :span="12"><i class="el-icon-user-solid"></i> 相关信息: 123456</el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {
    checkUserinfo
  } from "@/api/permission";

  export default {
    data() {
      return {
        clickClass: "1",
        list: {
          // 账号
          name: "",
          // 手机
          phone: "",
          // 邮箱
          email: "",
          // 用户名
          realName: "",
          // 企业全称
          companyName: "",
          // 所属地区
          address: "",
          // 所属公司
          company: "",
          // 执照
          pictures: {
            // 正面
            pictureUrlFront: "",
            pictureUrlFrontArr: [],
            // 反面
            pictureUrlback: "",
            pictureUrlbackArr: []
          },
          // 法人姓名
          legalName: "",
          // 法人身份证
          legalIdCode: "",
          // 法人电话
          legalTel: "",
          // 社会信用代码
          unifiedSocialCreditCode: "",
        },
      };
    },
    created() {
      this.getlist();
    },
    methods: {
      clickButton(c) {
        this.clickClass = c;
      },
      getlist() {
        checkUserinfo({
          id: this.$store.getters.userId,
        }).then((res) => {
          this.list.name = res.data.name;
          this.list.phone = res.data.phone;
          this.list.email = res.data.email;
          this.list.realName = res.data.realName;

          this.list.companyName = res.data.companyName;
          this.list.address = res.data.address;
          this.list.company = res.data.company;
          this.list.legalName = res.data.legalName;
          this.list.legalIdCode = res.data.legalIdCode;
          this.list.legalTel = res.data.legalTel;
          this.list.unifiedSocialCreditCode = res.data.unifiedSocialCreditCode;

          res.data.pictures.forEach(xx => {
              if (xx.type == 'front') {
                this.list.pictures.pictureUrlFront = "http://" + xx.pictureUrl;
                this.list.pictures.pictureUrlFrontArr.push("http://" + xx.pictureUrl)
              } else if (xx.type == 'back') {
                this.list.pictures.pictureUrlback = "http://" +  xx.pictureUrl;
                this.list.pictures.pictureUrlbackArr.push("http://" + xx.pictureUrl)
              }
          })

        });
      },
    },
  };
</script>

<style lang="scss" scope>
  @import "~@/styles/variables.scss";

  .Main {
    background-color: #ffffff;
    border-radius: 4px;
    min-height: 36px;
  }

  .bg-purple {
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #a8a8a8;
  }

  .bg-purple:hover {
    cursor: pointer;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .clickClass {
    background: var(--app_primary);
    color: $my_white;
  }

  .AccountTitle {
    font-size: 18px;
    font-weight: 600;
    margin: 10px;
  }
</style>
